<template>
    <div class="apply">
        <div class="apply_list" v-if="auditState==-1">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="1.5rem" :show-message="false"
                     :label-position="'top'" class="form clearfix">
                <div class="titleTime">
                    <span class="time">填报时间</span>
                    <span>{{ruleForm.time}}</span>
                </div>
                <el-form-item label="名称" prop="name">
                    <el-input placeholder="请输入" v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="统一社会信用代码" prop="creditCode" class="form-item-top">
                    <el-input placeholder="请输入" v-model="ruleForm.creditCode"></el-input>
                </el-form-item>
                <el-form-item label="企业所在乡镇/街道" prop="street" class="form-item-top">
                    <group class="form-group">
                        <x-address title="" :value-text-align="'left'" v-model="ruleForm.street" :list="addressData"
                                   placeholder="请选择" ref="street"></x-address>
                    </group>
                </el-form-item>
                <el-form-item label="企业（或项目）所在地（以实际生产办公地为准）" prop="place" class="form-item-top">
                    <el-input placeholder="请输入" v-model="ruleForm.place"></el-input>
                </el-form-item>
                <el-form-item label="行业" prop="industry" class="form-item-top">
                    <group class="form-group">
                        <selector title="" :value-text-align="'left'" v-model="ruleForm.industry"
                                  :options="industryData"
                                  placeholder="请选择"></selector>
                    </group>
                </el-form-item>
                <el-form-item label="企业法人" prop="legalPerson" class="form-item-top">
                    <el-input placeholder="请输入" v-model="ruleForm.legalPerson"></el-input>
                </el-form-item>
                <el-form-item label="疫情防控负责人" prop="principal" class="form-item-top">
                    <el-input placeholder="请输入" v-model="ruleForm.principal"></el-input>
                </el-form-item>
                <el-form-item label="疫情防控负责人手机号码" prop="mobilePhone" class="form-item-top">
                    <el-input placeholder="请输入" v-model="ruleForm.mobilePhone"></el-input>
                </el-form-item>
                <div class="title">企业分批复工计划</div>
                <el-form-item label="复工时间" prop="workTime">
                    <group class="form-group">
                        <!--                        <datetime-range title="选择" start-date="2020-02-26" end-date="2020-12-30"-->
                        <!--                                        v-model="ruleForm.workTime"></datetime-range>-->
                        <datetime v-model="ruleForm.workTime"></datetime>
                    </group>
                </el-form-item>
                <el-form-item label="复工人数" prop="workNumber" class="form-item-top">
                    <el-input placeholder="请输入" v-model="ruleForm.workNumber"></el-input>
                </el-form-item>
                <!--                <el-form-item label="上传营业执照、企业复工方案截图" prop="workNumber">-->
                <!--                    <el-upload-->
                <!--                        :action="'/_api/file/upload'"-->
                <!--                        :file-list="fileList"-->
                <!--                        list-type="picture">-->
                <!--                        <el-link size="small" type="primary" :underline="false">上传</el-link>-->
                <!--                    </el-upload>-->
                <!--                </el-form-item>-->
                <el-form-item label="企业承诺" prop="promise">
                    <div class="commitment">
                        本公司郑重承诺：对上述填报信息内容的真实性和完整性负责，并按照企业防控工作方案和市有关规定做好企业疫情防控相关工作，服从市新冠状病毒感染的肺炎疫情防控指挥部有关决定
                    </div>
                </el-form-item>
            </el-form>
            <el-button type="primary" class="submit" @click="submitForm('ruleForm')">提交</el-button>
        </div>
        <!-- 审核中 -->
        <div class="auditBox" v-if="auditState===0&&companyData">
            <ul>
                <li>
                    <div>商企名称</div>
                    <div>{{companyData.companyName}}</div>
                </li>
                <li>
                    <div>复工时间</div>
                    <div>{{companyData.reWorkTime}}</div>
                </li>
                <li>
                    <div>复工人数</div>
                    <div>{{companyData.reWorkNum}}</div>
                </li>
                <li>
                    <div>申请时间</div>
                    <div>{{companyData.createTime}}</div>
                </li>
                <li>
                    <div>状态</div>
                    <div class="red">审核中</div>
                </li>
            </ul>
        </div>
        <!-- 未通过 -->
        <div class="auditBox" v-if="auditState===2&&companyData">
            <ul>
                <li>
                    <div>商企名称</div>
                    <div>{{companyData.companyName}}</div>
                </li>
                <li>
                    <div>复工时间</div>
                    <div>{{companyData.reWorkTime}}</div>
                </li>
                <li>
                    <div>复工人数</div>
                    <div>{{companyData.reWorkNum}}</div>
                </li>
                <li>
                    <div>申请时间</div>
                    <div>{{companyData.createTime}}</div>
                </li>
                <li>
                    <div>状态</div>
                    <div class="red">审核未通过</div>
                </li>
            </ul>
            <div class="errorMsg">{{companyData.reason}}</div>
        </div>
        <!-- 已通过 -->
        <div class="auditBox" v-if="auditState===1&&companyData">
            <ul>
                <li>
                    <div>商企名称</div>
                    <div>{{companyData.companyName}}</div>
                </li>
                <li>
                    <div>复工时间</div>
                    <div>{{companyData.reWorkTime}}</div>
                </li>
                <li>
                    <div>复工人数</div>
                    <div>{{companyData.reWorkNum}}</div>
                </li>
                <li>
                    <div>申请时间</div>
                    <div>{{companyData.createTime}}</div>
                </li>
                <li>
                    <div>状态</div>
                    <div class="red">已通过</div>
                </li>
            </ul>
            <!--            <div class="Qrcode">-->
            <!--                <div>二维码</div>-->
            <!--                <div class="workCode">企业复工码</div>-->
            <!--                <div class="verification">请将复工码张贴在显眼的位置，供相关人员核查</div>-->
            <!--                <div class="download"><i class="el-icon-download"></i>下载复工码</div>-->
            <!--            </div>-->
        </div>
    </div>
</template>

<script>
    import {Checklist, Selector, Group, XAddress, ChinaAddressV4Data, Confirm, DatetimeRange, Datetime} from 'vux'

    export default {
        data() {
            return {
                fileList: [],
                ruleForm: {
                    time: [], // 填报时间
                    name: '', // 名称
                    creditCode: '', // 统一社会信用代码
                    place: '', // 企业（或项目）所在地（以实际生产办公地为准）
                    street: [], // 企业所在乡镇/街道
                    industry: '', // 行业
                    legalPerson: '', // 企业法人
                    principal: '', // 疫情防控负责人
                    mobilePhone: '', // 疫情防控负责人手机号码
                    workTime: this.$filter.timeFormat(null, 'YYYY-MM-DD'), // 复工时间
                    workNumber: '' // 复工人数
                },
                rules: {
                    name: [
                        {required: true, message: '请填写公司名称', trigger: 'blur'}
                    ],
                    creditCode: [
                        {required: true, message: '请填写统一社会信用代码', trigger: 'blur'}
                    ],
                    place: [
                        {required: true, message: '请填写企业所在地详址', trigger: 'blur'}
                    ],
                    street: [
                        {required: true, message: '请选择企业所在地区', trigger: 'change'}
                    ],
                    industry: [
                        {required: true, message: '请选择行业', trigger: 'change'}
                    ],
                    legalPerson: [
                        {required: true, message: '请填写企业法人', trigger: 'blur'}
                    ],
                    principal: [
                        {required: true, message: '请填写防控负责人', trigger: 'blur'}
                    ],
                    mobilePhone: [
                        {required: true, message: '请填写负责人手机号', trigger: 'blur'}
                    ],
                    workTime: [
                        {required: true, message: '请选择复工时间', trigger: 'change'}
                    ],
                    workNumber: [
                        {required: true, message: '请填写复工人数', trigger: 'blur'}
                    ]
                },
                auditState: null,
                companyData: null,
                addressData: ChinaAddressV4Data,
                industryData: ['农业', '工业', '服务业', '邮电', '通信', '社区服务', '批发', '零售业', '交通运输', '建筑及安装业', '医疗卫生', '城市建设', '旅游', '宾馆', '餐饮业']
            }
        },
        mounted() {
            this.ruleForm.time = this.$filter.timeFormat((new Date()), 'YYYY-MM-DD HH:mm:ss')
            this.getWorkInfo()
        },
        methods: {
            getWorkInfo() {
                let approvalResult = this.$route.query.approvalResult
                this.auditState = Number(approvalResult)
                if (Number(approvalResult) !== -1) {
                    this.$http.get('/resumption/getComApply').then(result => {
                        this.companyData = result.data
                    })
                }
            },
            submitForm(formName) {
                this.$refs.ruleForm.validate((valid, obj) => {
                    if (valid) {
                        this.$http.post('/resumption/apply', {
                            // createTime: this.ruleForm.time,
                            companyName: this.ruleForm.name,
                            uscc: this.ruleForm.creditCode,
                            address: this.ruleForm.place,
                            addressNext: this.$refs.street.nameValue,
                            businessType: '企业',
                            industry: this.ruleForm.industry,
                            legalPerson: this.ruleForm.legalPerson,
                            controlUser: this.ruleForm.principal,
                            controlTel: this.ruleForm.mobilePhone,
                            reWorkTime: this.ruleForm.workTime,
                            reWorkNum: this.ruleForm.workNumber,
                            enclosure: this.fileList.uid
                        }).then(result => {
                            if (result.success) {
                                this.$vux.toast.text('申请成功', 'middle')
                                this.$router.replace('/businessOperation?approvalResult=' + result.data.approvalResult)
                            }
                        })
                    } else {
                        this.$vux.toast.text(obj[Object.keys(obj)[0]][0].message, 'middle')
                        return false
                    }
                })
            }
        },
        components: {
            Checklist,
            Selector,
            Group,
            XAddress,
            Confirm,
            DatetimeRange,
            Datetime
        }
    }
</script>

<style scoped lang="less">
    .apply {
        height: 100%;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        padding-bottom: .86rem;

        .apply_list {
            background-color: #f4f4f4;
        }

        .title {
            line-height: .6rem;
            padding: 0 .2rem;
            margin-top: -.1rem;
            color: #999;

            &.mt {
                margin-top: -.15rem;
            }
        }

        .titleTime {
            line-height: .76rem;
            padding: 0 .2rem;
            margin-bottom: .15rem;
            background-color: #fff;

            .time {
                display: inline-block;
                width: 2rem;
            }
        }

        .tip {
            line-height: .36rem;
            padding: 0 .2rem;
            color: #999;
            margin-bottom: .1rem;
            font-size: .24rem;

            &.mt {
                margin-top: -.05rem;
            }
        }

    }

    /deep/ .form {
        .vux-no-group-title {
            margin-top: 0;
            font-size: .28rem;
        }

        .el-form-item {
            position: relative;
            font-size: .28rem;
            /*border-bottom: 1px solid #ddd;*/
            background-color: #fff;
            margin-bottom: .15rem;
            padding: .1rem 0;

            .el-link {
                position: absolute;
                top: -.6rem;
                right: .2rem;
            }

            .el-form-item__label {
                color: #333;
                padding: 0 0 0 .2rem;
                font-size: .28rem;
                line-height: .48rem;
                margin-bottom: .1rem;
            }

            .el-form-item__content {
                font-size: .28rem;
                line-height: .5rem;
            }

            .el-radio-group {
                padding: 0 .2rem;
                width: 100%;

                .el-radio {
                    width: 100%;
                    font-size: .28rem;
                    line-height: .48rem;
                    white-space: normal;
                    margin-right: 0;
                    margin-bottom: .1rem;
                }
            }

            .selector {
                padding: .1rem .2rem;
                line-height: .48rem;

                .weui-select {
                    padding-left: 0;
                    height: .48rem;
                    line-height: .48rem;
                    font-size: .28rem;
                }
            }

            .weui-cells_checkbox {
                .weui-icon-checked {
                    &:before {
                        font-size: .34rem;
                    }
                }

                .weui-check:checked + .vux-checklist-icon-checked {
                    &:before {
                        color: #409EFF;
                    }
                }
            }

            .el-input {
                font-size: .28rem;

                input {
                    padding: 0 .2rem;
                    border: 0 none;
                    height: .68rem;
                    line-height: .68rem;
                    border-radius: 2px;
                    /*border-color: rgba(255, 184, 203);*/
                }
            }

            .el-button {
                font-size: .28rem;
            }

            .form-group {
                .weui-cells {
                    &:before, &:after {
                        border: 0 none;
                    }

                    margin-top: 0;
                    font-size: .28rem;

                    .weui-cell {
                        padding: .15rem .2rem;

                        &:before {
                            border: 0 none;
                        }

                        &.weui-cell_select {
                            padding: 0 .2rem;
                        }
                    }

                    .vux-cell-value {
                        color: inherit;
                    }
                }
            }

            &.form-item-top {
                margin-top: -.2rem;
                border-top: 1px solid #eee;
            }

            &.is-error {
                input {
                    /*background-color: rgba(255, 184, 203, .3);*/
                    /*border: 1px solid rgba(255, 184, 203);*/
                }
            }

            .commitment {
                padding: 0 .2rem;
            }
        }

        .weui-select {
            line-height: .68rem;
            height: .68rem;
            padding-left: 0;
        }

        .vux-datetime {
            .vux-datetime-value {
                text-align: left;
            }
        }
    }

    // 审核中样式   未通过样式   已通过样式
    .auditBox {
        width: 100%;
        height: 100%;
        background-color: #fff;

        li {
            height: .8rem;
            line-height: .8rem;
            background-color: #fff;
            margin: 0 .2rem;
            border-bottom: .02rem solid #f4f4f4;

            div {
                float: left;
                text-align: left;

                &:nth-child(1) {
                    width: 1.6rem;
                }
            }

            .red {
                color: #ff0000;
            }
        }

        .errorMsg {
            margin: 0 .2rem;
            padding: .2rem;
            background: #f4f4f4;
        }

        .Qrcode {
            margin: 1rem auto;
            text-align: center;

            .workCode {
                line-height: 1rem;
                font-size: .30rem;
            }

            .verification {
                font-size: .28rem;
                color: #999;
            }

            .download {
                line-height: 1rem;
                color: #409eff;
                font-size: .34rem;
            }
        }
    }

    .submit {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: .88rem;
        border-radius: 0;
    }
</style>
